<template>
  <div class="schedule-item" :style="style">
    <div class="schedule-item__title">{{ title }}</div>
    <div class="schedule-item__time">{{ formatAt(startAt) }}-{{ formatAt(endAt) }}</div>
    <!-- <div>{{ remark }}</div> -->
  </div>
</template>

<script lang="ts" setup>
  const props = withDefaults(
    defineProps<{
      top: number
      height: number
      color: string
      width?: number
      title: string
      remark?: string
      startAt: string
      endAt: string
    }>(),
    {
      top: 0,
      height: 0,
      color: '#f56c6c',
      width: 100,
      remark: '暂无备注'
    }
  )

  const formatAt = (time: string) => time.split(' ')[1]

  const style = computed(() => {
    return {
      top: `${props.top}%`,
      height: `${props.height - props.top}%`,
      borderLeft: `4px solid ${props.color}`,
      backgroundColor: hexToRgba(props.color, 0.3),
      width: `${props.width}%`
    }
  })
</script>

<style scoped lang="scss">
  .schedule-item {
    background-color: #666;
    position: absolute;
    z-index: 1;
    border-radius: $radius-default;
    box-sizing: border-box;
    padding: 6px;
    &__title {
      font-weight: bold;
    }
    &__time {
      font-size: $fs-sm;
    }
  }
</style>
